<template>
  <div class="LicenseInformationSJY_YUAN">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div class="top_box">
            <el-input
              size="mini"
              style="display:inline-block;width:20%"
              v-model="input_val"
              placeholder="请输入编号/名称进行模糊搜索"
            ></el-input>
            <el-button
              size="small"
              style="margin-left:15px"
              icon="el-icon-search"
              @click="(page.page = 1), getTableData()"
            ></el-button>
            <el-button
              size="small"
              style="margin-left:15px"
              icon="el-icon-plus"
              @click="open"
            ></el-button>
          </div>
          <div class="main_box">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="table_loading"
                height="600"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  :index="
                    (index) => {
                      return page.limit * (page.page - 1) + index + 1;
                    }
                  "
                >
                </el-table-column>
                <el-table-column prop="InternalCode" label="内部标识符">
                </el-table-column>
                <el-table-column prop="ElementCode" label="数据元标识符">
                </el-table-column>
                <el-table-column prop="ElementName" label="数据元名称">
                </el-table-column>
                <el-table-column prop="Define" label="定义"> </el-table-column>
                <el-table-column prop="Remark" label="备注"> </el-table-column>
                <el-table-column prop="DataType" label="数据类型">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="table_items_edit(scope.row)"
                    ></el-button>
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="table_items_del(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- 页码 -->
            <div class="block">
              <el-pagination
                style="display:inline-block"
                layout="prev, pager, next"
                :total="page.total"
                :page-size.sync="page.limit"
                @current-change="page_change"
                :current-page="page.page"
              >
              </el-pagination>
              <el-select
                v-if="false"
                v-model="pages"
                placeholder="请选择"
                @change="pages_limit_change"
              >
                <el-option label="10条/页" :value="10"> </el-option>
                <el-option label="15条/页" :value="15"> </el-option>
                <el-option label="20条/页" :value="20"> </el-option>
              </el-select>
            </div>
          </div>
          <!-- 弹窗 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="right"
              label-width="120px"
              :model="formLabelAlign"
            >
              <el-form-item
                label="内部标识符"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.InternalCode"></el-input>
              </el-form-item>
              <el-form-item
                label="数据元标识符"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.ElementCode"></el-input>
              </el-form-item>
              <el-form-item
                label="数据元名称"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.ElementName"></el-input>
              </el-form-item>
              <el-form-item label="定义" style="display:inline-block;width:50%">
                <el-input v-model="formLabelAlign.Define"></el-input>
              </el-form-item>
              <el-form-item
                label="数据类型"
                style="display:inline-block;width:50%"
              >
                <el-select
                  filterable
                  v-model="formLabelAlign.DataType"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in DataType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="表示格式"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Format"></el-input>
              </el-form-item>
              <el-form-item
                label="允许值"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.AllowValue"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="btn_ok">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      input_val: "",
      page: {
        page: 1,
        limit: 12,
        total: 1,
      },
      dialogVisible: false,
      formLabelAlign: {},
      title: "",
      table_loading: false,
      DataType: [
        { value: "char", label: "char" },
        { value: "date", label: "date" },
        { value: "decimal", label: "decimal" },
        { value: "int", label: "int" },
        { value: "nchar", label: "nchar" },
        { value: "ntext", label: "ntext" },
        { value: "nvarcharn", label: "nvarcharn" },
        { value: "nvarchar", label: "nvarchar" },
      ],
    };
  },
  methods: {
    getTableData() {
      // 获取表格数据
      this.table_loading = true;
      this.$post(
        "/AssetDict/Element/List?keyword=" +
          this.input_val +
          "&page=" +
          this.page.page +
          "&limit=" +
          this.page.limit
      ).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.page.total = res.data.TotalCount;
          this.table_loading = false;
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.table_loading = false;
        }
      });
    },
    open() {
      // 弹窗开启事件
      this.formLabelAlign.Id ? (this.title = "修改") : (this.title = "新增");
      this.dialogVisible = true;
    },
    handleClose() {
      // 弹窗关闭事件
      this.dialogVisible = false;
      this.formLabelAlign = {};
    },
    btn_ok() {
      // 弹窗确定操作按钮事件
      let url = this.formLabelAlign.Id
        ? "/AssetDict/Element/Update"
        : "/AssetDict/Element/Create";
      let body = this.formLabelAlign;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.handleClose();
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    table_items_edit(val) {
      // 表格编辑事件
      var info = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(info);
      this.open();
    },
    table_items_del(val) {
      // 表格删除事件
      let id = val.Id;
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("/AssetDict/Element/Delete/" + id).then((res) => {
            if (res.code == 0) {
              this.getTableData();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
        })
        .catch((_) => {});
    },
    page_change(val) {
      // 表格页码切换事件
      this.page.page = val;
      this.getTableData();
    },
    pages_limit_change(val) {
      // 表格显示条数改变事件
      this.page.limit = val;
      this.getTableData();
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTableData();
  },
};
</script>
<style lang="scss">
.LicenseInformationSJY_YUAN {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .top_box {
    margin: 10px;
  }
  .main_box {
    margin: 10px;
    text-align: center;
  }
  .el-select .el-input {
    width: 100% !important;
  }
}
</style>
